<template>
  <div>
    <div class="manageBots">
      <div class="manageBots_content">
        <div class="manageBots_content_top">
          <div class="content_top_dd">管理机器人</div>
          <div class="content_top_btn notBlue" @click="showDialog()"><span>+</span>添加管理机器人</div>
        </div>
        <div class="manageBots_content_txt">
          <div class="content_txt_list" v-for="(item, index) in items" :key="index">
            <div class="txt_list_left">
              <div class="list_left_icon"><img src="@a/img/sv67.svg"/></div>
              <div class="list_left_txt">
                <div class="left_txt_title">{{item.name}}</div>
                <div class="left_txt_tag">
                  {{ item.word_count }} 字训练数据
                  <span></span>
                  {{item.count_conversation}}个对话
                  <span></span>
                  {{item.count_messages}}条信息
                  <span></span>
                  <div class="txt_tag_btn active">{{item.number_of_likes}}<img src="@a/img/sv68.svg"/></div>
                  <span></span>
                  <div class="txt_tag_btn">{{item.number_of_unlikes}}<img src="@a/img/sv69.svg"/></div>
                </div>
                <div class="left_txt_bottom">
                  <div class="txt_bottom_list">
                    <div class="bottom_list_dd">今日对话</div>
                    <div class="bottom_list_dt"><span style=" width: 50%;">{{item.percent_conversation}}</span></div>
                  </div>
                  <div class="txt_bottom_list">
                    <div class="bottom_list_dd">知识库</div>
                    <div class="bottom_list_dt"><span style="width: 65%;">{{item.percent_word}}</span></div>
                  </div>
                </div>
              </div>
            </div>
            <div class="txt_list_right">
              <template v-if="item.state == -1">
                <a href="/#/alRobot/myRobotDataAnalysis/myRobotDataAnalysis" class="list_right_li notBlue"><img src="@a/img/sv70.svg"/>购买</a>
              </template>
              <template v-if="item.state == 1">
                <a href="/#/alRobot/myRobotDataAnalysis/myRobotDataAnalysis" class="list_right_li notBlue"><img src="@a/img/sv70.svg"/>续费</a>
                <a href="/#/alRobot/myRobotSetUp/myRobotSetUp" class="list_right_li notBlue"><img src="@a/img/sv71.svg"/>升级</a>
              <a  @click="goIndex(item.id, item.name,'/alRobot/myRobotDataAnalysis/myRobotDataAnalysis')" class="list_right_li notBlue"><img src="@a/img/sv70.svg"/>进入</a>
              <a  @click="goIndex(item.id, item.name,'/alRobot/myRobotSetUp/myRobotSetUp')" class="list_right_li notBlue"><img src="@a/img/sv71.svg"/>设置</a>
              </template>
              <template v-if="item.state == 0">
                <a href="/#/alRobot/myRobotDataAnalysis/myRobotDataAnalysis" class="list_right_li notBlue"><img src="@a/img/sv70.svg"/>续费</a>
                <a href="/#/alRobot/myRobotSetUp/myRobotSetUp" class="list_right_li notBlue"><img src="@a/img/sv71.svg"/>升级</a>
                <a  @click="goIndex(item.id, item.name,'/alRobot/myRobotDataAnalysis/myRobotDataAnalysis')"  class="list_right_li notBlue"><img src="@a/img/sv70.svg"/>进入</a>
                <a  @click="goIndex(item.id, item.name,'/alRobot/myRobotSetUp/myRobotSetUp')" class="list_right_li notBlue"><img src="@a/img/sv71.svg"/>设置</a>
              </template>
              <a @click.stop="confirmDelete(index)" class="list_right_li notBlue"><img src="@a/img/sv71.svg"/>删除</a>
            </div>
          </div>
        </div>
      </div>



      <!-- 添加机器人 -->
      <div class="alRobotWindow" v-show="dialogVisible">
        <div class="alRobotWindow_content">
          <div class="alRobotWindow_content_title">
            <div class="content_title_left"><span></span>添加机器人</div>
            <div class="content_title_right" @click="dialogVisible = !dialogVisible"><i class="el-icon-close"></i></div>
          </div>
          <div class="alRobotWindow_content_txt">
            <div class="content_txt_list">
              <div class="txt_list_dd">名称</div>
              <div class="txt_list_dt">
                <el-input v-model="newItem.name" placeholder="机器人名称"></el-input>
              </div>
            </div>
            <div class="content_txt_list">
              <div class="txt_list_dd">简介</div>
              <div class="txt_list_dt">
                <el-input
                  type="textarea"
                  :rows="5"
                  placeholder="请输入内容"
                  v-model="newItem.brief_introduction">
                </el-input>
              </div>
            </div>
          </div>
          <div class="alRobotWindow_content_btn">
            <button @click="addItem">提交保存</button>
          </div>
        </div>
      </div>


    </div>

    <addNewRobot v-if="addRobotShow" @close="closeAddRobotWindow"></addNewRobot>
  </div>
</template>




<script>
import {Message, MessageBox} from "element-ui";
import {api} from "@/api-js";
import robotNav from "@c/common/robotNav/robotNav";
import addNewRobot from "@c/common/robotProducts/addNewRobot";
export default {
  data() {
    return {
      addRobotShow: false,
      items: [],
      dialogVisible: false,
      newItem: {
        name: '',
        brief_introduction: ''
      },

    };
  },
  components: {
    robotNav,
    addNewRobot
  },
  methods: {
    closeAddRobotWindow(){
      this.addRobotShow = false
      this.getList()
    },
    confirmDelete(index) {
      MessageBox.confirm('确定删除该项吗？', '提示', {
        type: 'warning'
      })
          .then(() => {
            this.removeItem(index);
          })
          .catch(() => {
            // 取消删除操作
          });
    },
    showDialog() {
      this.addRobotShow = true;

    },
    async addItem() {
      const newItem = {
        name: this.newItem.name,
        brief_introduction: this.newItem.brief_introduction
      };
      const [e, r] = await api.robot.add(newItem);
      console.log(e)
      console.log(r)
      if(!e && r) {
        await this.getList()
        this.dialogVisible = false;
      }

    },
    async removeItem(index) {
      const [e, r] = await api.robot.remove({id: this.items[index].id});
      if (!e && r) {
        Message.success('删除成功');
        await this.getList()
      }
    },
    async getList(){
      const [e, r] = await api.robot.list();
      console.log(e)
      console.log(r)
      if(!e && r) {
        this.items = r.result;
      }
    },
    goIndex(id, name, path) {
      localStorage.setItem('robotId', id);
      localStorage.setItem('robotName', name);
      this.$store.commit('setRobotId', id);
      this.$store.commit('setRobotName', name);
      this.$router.push(path);
    }
  },
  mounted() {
    this.getList()
  },
};
</script>


<style>
@import "manageBots.css";
</style>
